<!--
@Descripttion 表格
@version 1.0.0
@Author Bell
@Date 2021-10-07
@LastEditors Bell
@LastEditTime 2021-10-08
@ 使用
  引入组件
    import Table from '@/components/table/table'
  注册组件
    components: {
      Table
    }
  使用
    通过$refs中的selectData获取被选中的行数据 如:this.$refs.xxx.selectData
    <Table @select="(list) => {xxx = list}" :data="[{}]" :columns="[{title: 'ID', key: 'id', show: true, width: 100}]">插槽区域</Table>
    <Table @select="(list) => {xxx = list}" :handleWidth="0" :data="[{}]" rowKey="id" columnMark="tableKey" :columns="[{title: 'ID', key: 'id', show: true, width: 100}]">插槽区域</Table>
    @select            Function 必填       表格行选中后调用的回调，参数:selection
    handleWidth        Number   默认值(0)  操作栏最小宽度
    data               Array    必填       列表数据
    rowKey             String   默认('id') 表格行标识
    columnMark(唯一值)  String   默认('')   表格列标识（值为''时表格不可手动配置） 用于TableSetting 组件中localStorage存储数据
    columns            Array    必填       表格列 数组中对象格式见(>数据格式说明1)
  其他说明
    插槽参数: row(当前行对象) index(当前行下标)
    >数据格式说明1：
      {
        String  必填   title: '时间', // 表格标题
        String  必填   key: 'time', // 取值字段
        Boolean 必填   show: true, // 是否显示
        Number  非必填 width: 200, // 表格列宽度
        // 格式化
        Object  非必填 format: {
          Function 必填  method: dateFormat, // 函数
          All      非必填 params: 'YYYY-MM-DD' // 参数
        }
      }
 -->
<template>
  <div class="table-content">
    <TableSetting v-if="columnMark" :params="tableSet" :columnMark="columnMark" :columns="columnList" />
    <el-table
      border height="100%" ref="customerTable"
      :data="data"
      @row-click="rowClick"
      @row-dblclick="rowDblclick"
      @selection-change="selectionChange"
      :row-class-name="rowClassName"
    >
      <el-table-column width="40" type="selection" align="center"></el-table-column>
      <el-table-column width="60" type="index" show-overflow-tooltip>
        <template slot="header" slot-scope="scope">
          <i v-if="columnMark" @click="tableSet.show = true" class="el-icon-s-tools cursor-p"></i>
          <span v-else>序号</span>
        </template>
      </el-table-column>
      <!-- 循环表格列 -->
      <template v-for="(clo, index) in columnList">
        <el-table-column
          v-if="clo.show"
          :key="index"
          :label="clo.title"
          :width="clo.width ? clo.width : ''"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-html="clo.format ? clo.format.method(scope.row[clo.key], scope.row, clo.format.params) : scope.row[clo.key]"></span>
          </template>
        </el-table-column>
      </template>
      <el-table-column v-if="handleWidth" :min-width="handleWidth" label="操作" fixed="right">
        <template slot-scope="scope">
          <!-- 插槽参数: row(当前行对象) index(当前行下标) -->
          <slot :row="scope.row" :index="scope.$index"></slot>
        </template>
      </el-table-column>
      <el-table-column v-else></el-table-column>
    </el-table>
  </div>
</template>
<script>
import moment from 'moment'
import TableSetting from './table-setting'

export default {
  components: {
    TableSetting
  },
  props: {
    // 操作栏最小宽度
    handleWidth: {
      type: Number,
      default: 0
    },
    // 列表数据
    data: {
      required: true,
      type: Array
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    // (唯一值) 表格列标识（值为''时表格不可手动配置） 用于TableSetting 组件中localStorage存储数据
    columnMark: {
      type: String,
      default: ''
    },
    // 表格列 数组中对象格式见（>数据格式说明1）
    columns: {
      required: true,
      type: Array
    }
  },
  data() {
    return {
      moment,
      columnList: [], // 表格列
      // 表格配置
      tableSet: {
        show: false // 是否显示表格配置窗口
      },
      selectData: [] // 被选中的列表
    }
  },
  created () {
    // 从本地存储中获取表格列配置，如无则获取默认表格列
    if (this.columnMark) {
      let columnListTemp = JSON.parse(localStorage.getItem(this.columnMark))
      // 处理数据格式化的引用指向
      if (columnListTemp) {
        for (let itemTemp of columnListTemp) {
          for (let item of this.columns) {
            if (itemTemp.key === item.key) {
              itemTemp.format = item.format
            }
          }
        }
      }
      this.columnList = columnListTemp || this.columns
    } else {
      this.columnList = this.columns
    }
  },
  methods: {
    /**
     * 表格-单击整行
     * @param {Object} row
     * @param {Object} column
     * @param {Object} event
     */
    rowClick(row, column, event) {
      this.$refs.customerTable.toggleRowSelection(row);
    },
    /**
     * 表格-双击整行
     * @param {Object} row
     * @param {Object} column
     * @param {Object} event
     */
    rowDblclick(row, column, event) {
      // 功能待完善
    },
    /**
     * 表格 多选框触发
     * @param {Object} selection
     */
    selectionChange(selection) {
      this.$emit('select', selection)
      this.selectData = selection
    },
    /**
     * 表格高亮
     */
    rowClassName({ row, rowIndex }) {
      for (let item of this.selectData) {
        if (row[this.rowKey] === item[this.rowKey]) {
          return "selected-row"
        }
      }
    }
  }
}
</script>
<style lang="scss">
.table-handle {
  font-size: .8rem;
  margin-right: 10px;
  cursor: pointer;
  &:last-child {
    margin-right: 0;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/styles/color.scss";
@import "@/assets/styles/size.scss";
.table-content /deep/{
  position: relative;
  height: calc(100vh - #{$head-height} - 80px - 76px - 67px);
  margin: 0 20px;
  th,
  td {
    height: 44px;
  }
  th {
    color: #666;
    background-color: #f6f4f4 !important;
  }
  .el-table__fixed-right-patch{
    background-color: transparent;
  }
  .el-table-column--selection .cell{
    padding-right: 10px;
  }
  .el-icon-s-tools{
    position: relative;
    top: 2px;
    font-size: 20px;
  }
  .el-icon-s-tools:hover{
    opacity: .8;
  }
  // 表格选中颜色
  .el-table .selected-row > td {
    background-color: $color-table-selected-background !important;
  }
}
</style>
